<template>
	<view>
		<ljy-header></ljy-header>
		
		<ljy-tabs :tabs="tabsList" @tabsChange="handleTabsChange"></ljy-tabs>
		
		<ljy-goods v-for="(item,index) in newGoodsList" :key="index" :goods="item"></ljy-goods>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList:[
					{
						id:0,
						value:'综合',
						isActive:true
					},
					{
						id:2,
						value:'价格↑',
						isActive:false
					},
					{
						id:3,
						value:'价格↓',
						isActive:false
					}
				],
				queryParam:{
					query:'',
					cid:'',
					pagenum:1,
					pagesize:10
				},
				goodsList:[]
			}
		},
		onLoad(e) {
			this.queryParam.cid=e.cid;
			this.getGoodsList()
		},
		onReachBottom() {
			if(this.queryParam.pagenum >= this.totalPageCount) return uni.showToast({
				title:'数据加载完毕'
			})
			this.queryParam.pagenum++;
			this.getGoodsList();
		},
		onPullDownRefresh() {
			this.goodsList = [];
			this.queryParam.pagenum = 1;
			setTimeout(() => {
				this.getGoodsList(() => uni.stopPullDownRefresh())
			}, 1000)
		},
		methods: {
			handleTabsChange(activeId) {
				this.tabsList.forEach(v => v.id == activeId ? v.isActive = true : v.isActive = false)
			},
			async getGoodsList(cb) {
				const res = await this.$Https({
					url:'/goods/search',
					data:this.queryParam
				});
				console.log(res);
				cb && cb();
				// this.goodsList=res.message.goods;
				this.totalPageCount = Math.ceil(res.message.total / this.queryParam.pagesize);
				this.goodsList = [...this.goodsList, ...res.message.goods];
				console.log(this.goodsList);
			}
		},
		computed: {
			newGoodsList() {
				console.log('computed方法被调用');
				
				function compare(arg) {
					return function(a, b) {
						return a[arg] - b[arg];
					}
				}
				
				if(this.tabsList[0].isActive) {
					return this.goodsList;
				} else if(this.tabsList[1].isActive) {
					this.goodsList.sort(compare('goods_price'));
					return this.goodsList;
				} else {
					this.goodsList.sort(compare('goods_price'));
					this.goodsList.reverse();
					return this.goodsList;
				}
			}
		}
	}
</script>

<style lang="scss">
	
</style>
